import { Button, Link, Modal, TextContainer } from "@shopify/polaris";
import { useState, useCallback } from "react";
import FlieUpload from "../FlieUpload";

interface Props {
  state: boolean;
  setState: Function;
}
function ModalExample(props: Props) {
  const handleChange = useCallback(
    () => props.setState(!props.state),
    [props.state]
  );

  const activator = <Button onClick={handleChange}>Open</Button>;

  return (
    <div style={{ height: "500px" }}>
      <Modal
        activator={activator}
        open={props.state}
        onClose={handleChange}
        title="导入文件"
        primaryAction={{
          content: "添加",
          onAction: handleChange,
        }}
        secondaryActions={[
          {
            content: "取消",
            onAction: handleChange,
          },
        ]}
        footer={<Link url="http://baidu.com">百度</Link>}
      >
        <Modal.Section>
          <TextContainer>
            {/* FlieUpload组件 */}
            <FlieUpload />
            {/* FlieUpload组件 */}
          </TextContainer>
        </Modal.Section>
      </Modal>
    </div>
  );
}

export default ModalExample;
